<template>
  <div>
    <div>
      <button @click="$router.go(-1)">返回</button>
    </div>
    <h1>歌词播放页面--{{ $route.query.id }}</h1>
    <!-- 音乐播放器 -->
    <audio  :src="songUrl" autoplay controls></audio>
    <h1>歌手名称:{{singger}}</h1>
    <h1>歌曲名称:{{songName}}</h1>
    <div>
        {{lyric}}
    </div>
    <hr>
    <ul>
        <li class="comment" v-for="item in commentList" :key="item.commentId">
            <p>评论者:
                <img :src="item.user.avatarUrl" alt="" class="avatarUrl">
                {{item.user.nickname}}
            </p>
            评论的内容:{{item.content}}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
        //mp3
      songUrl: "",
      lyric: "", //歌词的属性
      songName: "",
      singger: "",
      commentList: [],
    };
  },
  mounted() {
    this.playMusic();
    this.getLyric();
    this.getDetail();
    this.getComment()
  },
  methods: {
    //封装一个播放音乐事件
    async playMusic() {
      const { data: res } = await this.$axios.get("song/url", {
        params: {
          id: this.$route.query.id,
        },
      });
      // console.log(this.$route.query,"我只是想看一看query都有甚麽东西")
      console.log(res, "url地址接口");
      if (res.code === 200) {
        this.songUrl = res.data[0].url;
      }
    },
    //获取一个封装歌词的事件
    async getLyric() {
      const { data: res } = await this.$axios.get("lyric", {
        params: {
          id: this.$route.query.id,
        },
      });
      console.log(res, "我爱的歌词呀");
      this.lyric = res.lrc.lyric;
    },
    //歌曲详情接口
    async getDetail() {
      const { data: res } = await this.$axios.get("song/detail", {
        params: {
          ids: this.$route.query.id,
        },
      });
      console.log(res, "歌词详情good");
      if (res.code === 200) {
        this.songName = res.songs[0].name;
        this.singger = res.songs[0].ar[0].name;
      }
    },
    //歌曲评论
    async getComment() {
      const { data: res } = await this.$axios.get("comment/music", {
        params: {
          id: this.$route.query.id
        },
      });
      console.log(res,"歌单评论")
      if(res.code === 200){
          this.commentList = res.comments
      }else{
          this.$message.error("获取歌单评论失败")
      }
    },
  },
};
</script>

<style scoped>
.avatarUrl{
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
}
.comment{
    border: 2px solid #ccc;
}
</style>